<script lang="ts" setup>
import { ref } from 'vue'
import { getCategoryFilterAPI ,getSubCategoryAPI} from '@/apis/category'
import type { TabsPaneContext } from 'element-plus'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { get } from '@vueuse/core'
const activeName = ref('first')
const route = useRoute()
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const categoryfilterData=<any>ref([])

const getCategoryfilter=async()=>{
  const res=await getCategoryFilterAPI(route.params.id)
  console.log(res);
  // @ts-ignore 
  categoryfilterData.value=res.result;
}
onMounted(()=>{
  getCategoryfilter()
})
const goodsList=ref([])
const reqData =ref({
  categoryId:route.params.id,
  page:1,
  pageSize:20,
  sortField:'publishTime'
})
const getGoodsList=async()=>{
  const res=await getSubCategoryAPI(reqData.value)
  
   // @ts-ignore 
  goodsList.value=res.result.items;
  console.log(goodsList.value);
}
onMounted(()=>{
  getGoodsList()
})
const tabChange=()=>{
 console.log("tab切换了",reqData.value.sortField);
 reqData.value.page=1;
 getGoodsList();
}
</script>




<template>
  <div style="width: 100%; text-align: left; clear: both;">
<el-breadcrumb separator=">">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/category/' + categoryfilterData.parentId }">{{ categoryfilterData.parentName }}</el-breadcrumb-item>
    <el-breadcrumb-item> {{ categoryfilterData.name }}</el-breadcrumb-item>
  </el-breadcrumb>
</div>
 <!-- @ts-ignore  -->
  <el-tabs v-model="reqData.sortField" class="demo-tabs" @tab-change="tabChange">
    <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
    <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
    <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
  </el-tabs>
  
<div class="goods-list">
  <div class="goods-item" v-for="item in goodsList" :key="item.id">
    <img :src="item.picture" alt="">
    <div class="goods-info">
      <div class="goods-title">{{ item.name }}</div>
      <div class="goods-price">{{ item.desc }}</div>
      <div class="goods-sell">{{ item.price}}</div>
    </div>
  </div>
</div>

</template>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.goods-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goods-item{
  width: 20%;
  margin-bottom: 20px;
}
.goods-item img{
  width: 100%;
}
</style>
